<template>
    <div class="content">
            <ul class="shopuls">
                <li v-for="(n,index) in shuju">
                    <span class="anniu"></span>
                    <img :src="n.p1" alt="" class="tu">
                    <div class="rig">
                        <h4>{{n.title}}</h4>
                        <p>{{n.dec}}</p>
                        <div class="word_b">
                            <h5>￥{{n.money}}</h5>
                            <div class="jiajian">
                                <span @click="subs(index)">-</span>
                                <span>{{n.num}}</span>
                                <span @click="adds(index)">+</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="content_bottom" v-for="n in shuju">
                <div class="top">
                    <img :src="n.p1" alt="">
                    <h4>看了该宝贝的还看了</h4>
                </div>
                <ul class="bottom">
                    <li>
                        <div class="b_left">
                            <img src="../../assets/img/icon_tu111.webp" alt="">
                            <div class="b_middle">
                                <span>棉大衣</span>
                                <span>东大门</span>
                                <span>纯色</span>
                                <span>定制</span>
                            </div>
                            <div class="b_bottom">
                                <span>￥435</span>
                                <span class="gwc"><img src="../../assets/img/icon_44.png" alt=""></span>
                            </div>
                        </div>
                        <div class="b_right">
                            <img src="../../assets/img/icon_tu111.webp" alt="">
                            <div class="b_middle">
                                <span>棉大衣</span>
                                <span>东大门</span>
                                <span>纯色</span>
                                <span>定制</span>
                            </div>
                            <div class="b_bottom">
                                <span>￥435</span>
                                <span class="gwc"><img src="../../assets/img/icon_44.png" alt=""></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="jiesuan">
                <div class="j_l">
                    <span class="all"></span>
                    <h4>全选({{tnum}})</h4>
                </div>
                <div class="j_r">
                    <h5>￥{{tmoney}}</h5>
                    <span>结算</span>
                </div>
            </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        props:["tmoney","tnum","shuju","adds","subs"],
    }
</script>
<style scoped>
    .content{
        width:100%;
        flex: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .shopuls{
        margin-bottom:20px;
        display: flex;
        flex-direction: column;
        font-size:0.1rem;
        background: white;
    }
    .shopuls li{
        display:flex;
        padding:0.2rem 0.2rem 0.1rem 0.2rem;
    }
    .anniu{
        width:0.15rem;
        height:0.15rem;
        color:white;
        font-size:0.15rem;
        text-align:center;
        font-weight:bold;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-top:15%;
        margin-right: 5%;
        border:1px solid #5e5e5e;
        /*background: #FF7D96;*/
    }
    .tu{
        width: 25%;
        height: 1.2rem;
        border-radius: 5%;
    }
    .rig{
        display: flex;
        width:60%;
        flex-direction: column;
        margin-left:10%;
        line-height: 0.2rem;
    }
    .rig h4{
        font-size: 0.13rem;
        font-weight: bold;
        color: black;
    }
    .rig p{
        font-size: 0.12rem;
        color: gray;
    }
    .word_b{
        display: flex;
        flex-direction: column;
        margin-top:0.2rem;
    }
    .word_b h5{
        font-size:0.15rem;
    }
    .content_bottom{
        padding:0.1rem 0.1rem 0.1rem 0.1rem;
    }
    .top{
        display:flex;
    }
    .top img{
        width:7%;
        height:0.3rem;
    }
    .top h4{
        font-size: 0.13rem;
        margin-left: 3%;
        color:gray;
        margin-top: 0.08rem;
    }
    .bottom{
        display: flex;
    }
    .bottom li{
        display: flex;
        margin-top:0.2rem;
    }
    .b_left{
        width:48%;
        margin-right:2%;
        background: white;
        border-radius:3%;
        padding-bottom: 0.1rem;
    }
    .b_right{
        width:48%;
        margin-left:2%;
        background: white;
        border-radius:3%;
    }
    .bottom img{
        width:100%;
    }
    .b_middle{
        display: flex;
        font-size: 0.12rem;
        margin-top: 0.1rem;
    }
    .b_middle span{
        margin:0 0.03rem;
        background:#F5F5F9;
        white-space:nowrap;
    }
    .b_bottom{
        display: flex;
        font-size:0.15rem;
        margin-top:0.2rem;
        font-weight:bold;
        justify-content: space-between;
    }
    .gwc{
        width:0.4rem;
        height: 0.2rem;
        border:1px solid #FF7D96;
        margin-right: 0.1rem;
    }
    .gwc img{
        width:65%;
        height:85%;
        margin-left: 15%;
        margin-top: 5%;
    }
    .jiesuan{
        display: flex;
        justify-content: space-between;
        width:100%;
        height: 0.3rem;
        position: fixed;
        bottom: 0.6rem;
        background: white;
        z-index: 999;
        font-size: 0.2rem;
        padding:0.2rem 0.1rem 0 0.1rem;
        border-bottom:1px solid #F7DDF7;
    }
    .all{
        width:0.15rem;
        height:0.15rem;
        color:white;
        font-size:0.15rem;
        text-align:center;
        font-weight:bold;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 5%;
        margin-top:0.03rem;
        border:1px solid #5e5e5e;
        /*background: #FF7D96;*/
    }
    .j_l{
        display: flex;
        white-space:nowrap;
        width: 40%;
        font-size: 0.13rem;
        color: gray;
    }
    .j_l h4{
        margin-top:0.02rem;
    }
    .j_r{
        display: flex;
        margin-right: 0.2rem;
    }
    .j_r span{
        width:0.6rem;
        height:0.2rem;
        text-align:center;
        border-radius: 5%;
        color: white;
        font-size:0.13rem;
        background:#FF86B8;
        margin-left: 0.2rem;
        margin-top: 0.04rem;
    }
    .j_r h5{
        font-size: 0.13rem;
        margin-top: 0.04rem;
        color: #FF86B8;
    }
    .jiajian{
        display: flex;
        margin-top:0.1rem;
    }
    .jiajian span{
        width:0.4rem;
        height:0.2rem;
        background:gray;
        text-align: center;
        color:white;
        background: #FF7D96;
        margin-right:0.03rem;
        font-size:0.15rem;
    }
</style>